<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title></title>
    <link rel="stylesheet" href="../frame/layui/css/layui.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../frame/treetable/css/jquery.treetable.css">
    <link rel="stylesheet" href="../frame/treetable/css/jquery.treetable.theme.default.css">
    <link rel="icon" href="../image/code.png">
</head>
<body class="body">



<!-- tree table -->
<div class="my-tree-table-box">
    <!-- tree -->
   
       <table id="tree-table" class="layui-table">
		
		</table>
    

</div>



<script type="text/javascript" src="../frame/layui/layui.js"></script>

<script src="../frame/jquery-1.10.2.min.js"></script>
<script src="../frame/treetable/jquery.treetable.js"></script>
<script type="text/javascript">
  
   	
   	
   	
   	var zNodes = [
    {id:1,fid:0,title:"A",status:"0"},
    {id:2,fid:0,title:"B",status:"0"},
    {id:3,fid:0,title:"C",status:"0"},
    {id:11,fid:1,title:"A1",status:"1"},
    {id:12,fid:1,title:"A2",status:"1"},
    {id:13,fid:1,title:"A3",status:"1"},
    {id:21,fid:2,title:"B1",status:"1"},
    {id:22,fid:2,title:"B2",status:"1"},
    {id:23,fid:2,title:"B3",status:"1"},
    {id:31,fid:3,title:"C1",status:"1"},
    {id:32,fid:3,title:"C2",status:"1"},
    {id:33,fid:3,title:"C3",status:"1"},
    {id:34,fid:31,title:"C11",status:"2"},
    {id:35,fid:31,title:"C12",status:"2"},  
    {id:36,fid:31,title:"C13",status:"2"},
    {id:37,fid:36,title:"C131",status:"3"},
    {id:38,fid:37,title:"C1311",status:"4"}
];

layui.config({
	base: '../js/modules/' //这个路径以页面引入的位置进行计算
});
layui.use("tree-table",function(treeTable){
	
	treeTable.init($('#tree-table'),{
		data:zNodes,
		column:1,
		columns:[{
			title:"id",
			name:"id"
		},{
			title:"title",
			name:"列明"
		},{
			title:'status',
			name:'status'
		}]
	});
	
})
	

</script>
</body>
</html>